<template>
	<view class="tags" :class="tagsClass">
		<view class="tag fboxRow Ycenter Xcenter" :class="[isBorder ? 'tag-border': '']"
			v-for="(item, index) in list" :key="index">
			<view class="lh38 font-ell1" @click="clickTag(item)">{{keyName ? item[keyName] : item}}</view>
			<view class="del" v-if="isDel" @click="delTag(index, item)"><u-icon name="close-circle" color="#CC9870" size="16"></u-icon></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tagsClass:{
				type: String,
				default: 'fboxWrap'
			},
			list: {
				type: Array,
				default:()=>{
					return []
				}
			},
			isDel:{
				type: Boolean,
				default: false
			},
			isBorder: {
				type: Boolean,
				default: false
			},
			keyName: {
				type: String,
				default: ''
			}
		},
		data() {
			return {}
		},
		methods: {
			delTag(index, item){
				this.$emit('del',index)
			},
			clickTag(item){
				this.$emit('click',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tag {
		margin: 16rpx 16rpx 0 0;
		padding: 0 12rpx;
		max-width: 228rpx;
		height: 56rpx;
		border-radius: 8rpx;
		background: var(--viewDivisionColor);color: var(--contentFontFourColor);
	}
	// .tag +.tag{margin-left: 16rpx;}
	.tag-border{border: 1px solid var(--buttonOutlineOneColor);color: var(--contourButtonTextColor);background: var(--pureButtonBackOneColor);color: var(--contourButtonTextColor);}
	.del{margin-left: 8rpx;}
</style>
